/**
 * 作用:
 * 这个函数的主要作用就是封装了一个通用的请求逻辑,方便在不同的组件中复用
 * 包含了 请求接口,返回数据的逻辑,同时包括了查询逻辑,因为查询参数也要跟接口地址一起传给后端
 * 也包含了 分页的相关逻辑,方便在表格组件中使用,有切换页码,切换每页条数,重置分页等功能
 * 同时,由于直接接收后端接口地址,直接在函数内部调用 post 方法,省去了在组件中引入 api 文件的麻烦
 *
 * 注意:
 * 前端调用这个方法时,需要传入接口地址和初始参数(查询区块的双向绑定数据)
 * 同时这个函数还需要接收一个范型,是表格数据的范型(T)
 *
 *
 * 功能描述:
 * 1:引入vue3中所需语法
 * 2:引入http里封装的 post 请求方法
 * 3:定义 useHttp 函数,接收两个参数 url(前端要传入的后端接口地址) 和 initialParams(初始请求参数)
 * 4:声明 dataList ,用于存放后端接口返回的表格数据
 * 5:声明 loading , 用于控制表格组件的加载状态,一般默认false,数据请求中时为true
 * 6:声明 totals , 用于存放后端接口返回的总数据条数
 * 7:声明 pageInfo , 用于存放分页信息
 *
 * 8: 定义 loadData 方法,用于加载表格数据
 * 8-1: 在 loadData 方法中,调用 post 方法,并传入接口地址和请求参数
 * 8-2: 处理接口返回的数据,并更新 dataList(表格数据) 和 totals(总数据条数)
 * 8-3: 处理请求过程中的错误
 * 8-4: 不管请求成功与否,都需要将 loading 状态设置为 false,结束加载,隐藏加载动画
 *
 * 9: 在组件渲染完成后,调用 loadData 方法
 *
 * 10: 定义 handleCurrentChange 方法,用于处理用户切换页码的操作
 * 10-1: 方法会接收一个新的页码参数,这个参数是 element-plus 里分页组件自动传过来的
 * 10-2: 在方法内部,更新 pageInfo.page 的值为新的页码,并调用 loadData 方法
 *
 * 11: 定义 handleSizeChange 方法,用于处理用户切换每页条数的操作
 * 11-1: 方法会接收一个新的每页条数参数,这个参数是 element-plus 里分页组件自动传过来的
 * 11-2: 在方法内部,更新 pageInfo.pageSize 的值为新的每页条数,并调用 loadData 方法
 *
 * 12: 定义 resetPagination 方法,用于重置分页信息
 * 12-1: 在方法内部,重置 page 和 pageInfo 的值为初始值,并调用 loadData 方法
 *
 *
 * 13: 导出外部所需变量及方法
 *
 */

import { onMounted, reactive, ref, unref } from "vue";
import { post } from "@/utils/http";
export function useHttp<T>(url: string, initialParams: any) {
  // 存储表格数据
  const dataList = ref<T[]>([]);
  // 存储加载状态
  const loading = ref<boolean>(false);
  // 存储总数据条数(页码总数)
  const totals = ref<number>(0);
  // 存储分页的页码信息
  const pageInfo = reactive({
    page: 1, // 当前页码
    pageSize: 10, // 每页条数
  });

  // 定义loadData方法,用于加载表格数据,也用于查询功能
  const loadData = async () => {
    loading.value = true; // 开始加载,显示加载动画
    try {
      const {
        data: { list, total },
      } = await post(url, {
        ...unref(initialParams),
        ...pageInfo,
      });

      dataList.value = list;
      totals.value = total;
    } catch (e) {
      console.log("useHttp.ts报错:" + e);
    } finally {
      loading.value = false; // 结束加载,隐藏加载动画
    }
  };

  // 组件加载后,调用loadData方法
  onMounted(() => {
    loadData();
  });

  // 分页组件相关方法 - 当用户切换页码的时候,触发该方法
  const handleCurrentChange = (page: number) => {
    pageInfo.page = page;
    loadData();
  };

  // 分页组件相关方法 - 当用户更新每页总条数的时候,触发该方法
  const handleSizeChange = (size: number) => {
    pageInfo.pageSize = size;
    loadData();
  };

  // 分页组件相关方法 - 重置分页组件方法
  const resetPagination = () => {
    pageInfo.page = 1;
    pageInfo.pageSize = 10;
    loadData();
  };

  return {
    dataList,
    loading,
    totals,
    pageInfo,
    loadData,
    handleCurrentChange,
    handleSizeChange,
    resetPagination,
  };
}
